<template>
<!-- 在处理事件时调用e.preventDefault() 和 e.stopPropagation()很常见 -->
<!-- 但是希望在方法更专注逻辑处理，所以用v-on的事件修饰符更好 -->
<!-- @click.prevent 是推荐用法，在绑定的事件后加一个. -->
<h3>事件修饰符</h3>
<a @click.prevent="clickHandle" href="https://cn.bing.com">必应</a>
<div @click="stopClickDiv">
    <a @click.stop="stopClickA">测试冒泡</a>
</div>
</template>

<script>
    export default{
        data(){
            return{

            }
        },
        methods:{
            clickHandle(e){
                // e.preventDefault(); 不推荐的做法，在方法里处理
                console.log("点我了但是不能跳转");               
            },
            stopClickA(e){
                // e.stopPropagation();
                console.log("没有被阻止");
            },
            stopClickDiv(e){
                console.log("DIV被stop了，无法打印")
            }
        }
    }
</script>